<style>
    .calendar {
        color: #444;
        width: 100%;
        table-layout: fixed;
    }

    .calendar-title th {
        font-size: 14px;
        font-weight: bold;
        padding: 15px;
        text-align: center;
        text-transform: uppercase;
    }

    .calendar-header th {
        padding: 10px;
        text-align: center;
    }

    .calendar-title th {
        font-weight: normal;
    }

    .calendar-title th span {
        margin: 0 5px;
        color: #666;
    }

    .calendar-title th a {
        margin: 0 5px;
        color: #666;
    }

    .calendar tbody tr td {
        text-align: center;
        vertical-align: middle;
        width: 14.28%;
        height: 60px;
        line-height: 30px;
    }

    .calendar tbody tr td.pad {
        background: rgba(255, 255, 255, 0.1);
    }

    .calendar tbody tr td.day {
    }

    .calendar tbody tr td.day div:first-child {
        display: block;
        width: 30px;
        margin: 0 auto;
        cursor: pointer;
    }

    .calendar tbody tr td.signed div:first-child {
        background: #f7b82e;
        color: #fff;
        border-radius: 30px;
    }

    .calendar tbody tr td.today {
        background: rgba(0, 0, 0, 0.1);
    }

    .signin-rank-table > tbody > tr > td {
        vertical-align: middle;
    }
</style>
<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default panel-page">
                <div class="panel-heading">
                    <h2>我的签到
                        <a class="btn btn-success pull-right btn-signin {:$signin?'disabled':''}" href="javascript:;">
                            <i class="fa fa-location-arrow"></i> <span>{:$signin?'已签到':'签到'}</span>
                        </a>

                        <a href="javascript:;" class="btn btn-default pull-right btn-rule" style="margin-right:5px;">
                            <i class="fa fa-question-circle"></i>
                            签到积分规则
                        </a>

                        <a href="javascript:;" class="btn btn-default pull-right btn-rank" style="margin-right:5px;">
                            <i class="fa fa-trophy"></i>
                            排行榜
                        </a>
                    </h2>
                </div>
                <div class="panel-body" style="padding:0;">
                    <div class="alert alert-warning-light">
                        {if $signin}
                        你当前已经连续签到 <b>{$successions}</b> 天，明天继续签到可获得 <b>{$score}</b> 积分
                        {else /}
                        今天签到可获得 <b>{$score}</b> 积分，请点击签到领取积分
                        {/if}
                    </div>
                    <div class="calendar calendar3"></div>
                    {:$calendar->draw($date);}
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="signintpl">
    <table class="table table-striped" style="margin-bottom:0;">
        <thead>
        <tr>
            <th>连续签到天数</th>
            <th class="text-center">获得积分</th>
        </tr>
        </thead>
        <tbody>
        {volist name="signinscore" id="item"}
        <tr>
            <td>第{$key|str_replace='s','',###}天</td>
            <td class="text-center">+{$item}</td>
        </tr>
        {/volist}
        </tbody>
    </table>
</script>

<script type="text/html" id="ranktpl">
    <div style="padding:20px;min-height:300px;">
        <div class="alert alert-warning-light">当前连续签到 <%=successions%> 天，排名 <%=ranking%> 名</div>
        <table class="table table-striped table-hover signin-rank-table mb-0">
            <thead>
            <tr>
                <th class="text-center">排名</th>
                <th>头像</th>
                <th width="40%">昵称</th>
                <th class="text-center">连续签到</th>
            </tr>
            </thead>
            <tbody>
            <%for(var i=0;i< ranklist.length;i++){%>
            <tr>
                <td class="text-center"><%=i+1%></td>
                <td><a href="<%=ranklist[i]['user']['url']%>"><img src="<%=ranklist[i]['user']['avatar']%>" height="30" width="30" alt="" class="img-circle"/></a></td>
                <td><a href="<%=ranklist[i]['user']['url']%>"><%=ranklist[i]['user']['nickname']%></a></td>
                <td class="text-center"><%=ranklist[i]['days']%> 天</td>
            </tr>
            <%}%>
            </tbody>
        </table>
    </div>
</script>
